<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博客注册页</title>

    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/register.css">
    <!-- 使用Font Awesome图标 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
</head>

<body>
    <div class="nav">
        <img src="pic/logo2.jpg" alt="">
        <span class="blog-title">我的博客系统</span>
        <div class="space"></div>
        <a class="nav-span" href="blog_list.html"><i class="fas fa-home"></i> 主页</a>
        <a class="nav-span" href="blog_edit.html"><i class="fas fa-edit"></i> 写博客</a>
    </div>

    <div class="container-register">
        <div class="register-dialog">
            <div class="register-header">
                <h3>欢迎注册小灰灰博客社区</h3>
                <p class="subtitle">加入我们，分享你的想法与世界</p>
            </div>
            <div class="register-form">
                <div class="form-group">
                    <label for="username"><i class="fas fa-user"></i> 用户名</label>
                    <input type="text" name="username" id="username" placeholder="请输入用户名">
                </div>
                <div class="form-group">
                    <label for="password"><i class="fas fa-lock"></i> 密码</label>
                    <input type="password" name="password" id="password" placeholder="请输入密码">
                </div>
                <div class="form-group">
                    <label for="githubURL"><i class="fab fa-github"></i> GitHub</label>
                    <input type="text" name="githubURL" id="githubURL" placeholder="请输入GitHub地址（选填）">
                </div>
                <div class="form-group">
                    <label for="email"><i class="fas fa-envelope"></i> 邮箱</label>
                    <input type="email" name="email" id="email" placeholder="请输入邮箱地址">
                </div>
                <div class="form-button">
                    <button id="submit" onclick="register()">注册账号</button>
                </div>
                <div class="login-link">
                    <span>已有账号? <a href="blog_login.html">返回登录</a></span>
                </div>
            </div>
        </div>
    </div>
    <script src="js/jquery.min.js"></script>
    <script src="js/common.js"></script>
    <script>
        function register() {
            $.ajax({
                type: "post",
                url: "/user/register",
                contentType: "application/json",
                data: JSON.stringify({
                    "userName": $("#username").val(),
                    "password": $("#password").val(),
                    "email": $("#email").val(),
                    "githubURL": $("#githubURL").val()
                }),
                success: function(result) {
                    if (result.code == 200 && result.data != null) {
                        //注册成功
                        location.href = "blog_register_success.html";
                    } else {
                        alert(result.errMsg);
                    }
                }
            });
        }
    </script>
</body>

</html>